import React from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import 'antd/dist/antd.css'
import '../index.css'
import { Table, Space } from 'antd'

function List({ list, dispatch }) {
  function deleteUserHandler(id) {
    dispatch({
      type: 'delete_user',
      payload: {
        id,
      },
    })
  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Link to={'/list/' + record.id}>修改</Link>
          <button onClick={() => deleteUserHandler(record.id)}>删除用户</button>
        </Space>
      ),
    },
  ]
  console.log(list)
  return <Table columns={columns} dataSource={list} />
}

// export default connect(model => {
//   return {
//     list: model.list,
//   }
// })(List)

export default connect(({ list }) => ({ list }))(List)
